<template>
    <div class="content">
        <div class="top-item" :bg="getBgColor"></div>
        <div class="bottom-item">
            <div class="border-item">
                <div class="headimg">
                    <img :src="userInfo.headimgurl"/>
                </div>
                <div class="nickname">
                    {{userInfo.nickname}}
                    <van-tag round :color="getColor" :bg="getBgColor">
                        <span v-if="cardType === 2">
                            <span class="error"><van-icon name="cross" /></span>
                            信息错误
                        </span>
                        <span v-else-if="cardType === 3">
                            <span class="error"><van-icon name="cross" /></span>
                            隔离
                        </span>
                        <span v-else-if="cardType === 4">
                            <span class="error"><van-icon name="cross" /></span>
                            密接
                        </span>
                        <span v-else-if="cardType === 5">
                            <span class="error"><van-icon name="cross" /></span>
                            疑似
                        </span>
                        <span v-else-if="cardType === 6">
                            <span class="error"><van-icon name="cross" /></span>
                            确诊
                        </span>
                        <span v-else>
                            ✔ 确认无误
                        </span>
                    </van-tag>
                </div>
            </div>
            <div class="border-item" style="padding: 0">
                <van-grid :column-num="3">
                    <van-grid-item icon="https://skv4.oss-cn-hangzhou.aliyuncs.com/app/skv4/common1583472316000/wdzj.png"
                                   text="我的证件" />
                    <van-grid-item icon="https://skv4.oss-cn-hangzhou.aliyuncs.com/app/skv4/common1583472316000/wdyy.png"
                                   text="我的预约" />
                    <van-grid-item icon="https://skv4.oss-cn-hangzhou.aliyuncs.com/app/skv4/common1583472316000/wddd.png"
                                   text="我的订单" />
                </van-grid>
            </div>
            <div class="border-item" style="padding: 0">
                <van-cell-group>
                    <van-cell title="我的咨询" is-link
                              icon="https://skv4.oss-cn-hangzhou.aliyuncs.com/app/skv4/common1583472316000/zixun.png"/>
                    <van-cell title="我的复核" is-link
                              icon="https://skv4.oss-cn-hangzhou.aliyuncs.com/app/skv4/common1583472316000/fuhe.png"/>
                    <van-cell title="我的投诉" is-link
                              icon="https://skv4.oss-cn-hangzhou.aliyuncs.com/app/skv4/common1583472316000/tousu.png"/>
                    <van-cell title="我的收藏" is-link
                              icon="https://skv4.oss-cn-hangzhou.aliyuncs.com/app/skv4/common1583472316000/shoucang.png"/>
                </van-cell-group>
            </div>
        </div>
    </div>
</template>

<script>
import { getOpenidMsg } from '@/api/yi-qing-fang-kong.js'
import distData from '@/libs/dist.js'
export default {
  data () {
    return {
      userInfo: [],
      qrColor: distData.qrColor,
      fontColor: distData.fontColor,
      borderColor: distData.borderColor,
      bgColor: distData.bgColor,
      cardType: 1
    }
  },
  mounted () {
    this.init()
  },
  computed: {
    getColor () {
      return this.qrColor[this.cardType]
    },
    getCircleColor () {
      return this.borderColor[this.cardType]
    },
    getFillColor () {
      return this.qrColor[this.cardType]
    },
    getFontColor () {
      return this.fontColor[this.cardType]
    },
    getBgColor () {
      return this.bgColor[this.cardType]
    }
  },
  methods: {
    init () {
      getOpenidMsg().then(ret => {
        if (ret.data.errcode === 0) {
          console.log('获取注册过的人员信息', ret.data)
          let data = ret.data.data.result
          if (data) {
            this.userInfo = data
            this.cardType = data.type
          }
        } else {
          this.failNotice(ret.data.errmsg)
        }
      })
    }
  }
}
</script>

<style scoped>
    .content{
        background-color: #f5f5f5;
        height: 100%;
    }
    .top-item{
        height: 100px;
        background: #00cc33;
        width: 100%;
    }
    .bottom-item{
        padding: 0 15px;
        margin-top: -30px;
    }
    .border-item{
        height: auto;
        background: #ffffff;
        border-radius: 5px;
        padding: 15px;
        margin-bottom: 15px;
    }
    .headimg{
        position: absolute;
    }
    .headimg img{
        width: 60px;
        height: 60px;
        border-radius: 60px;
        border: 3px solid #ffffff;
        position: relative;
        top: -40px;
        left: 0;
        background: #ffffff;
    }
    .nickname{
        padding-left: 70px;
        font-size: 12px;
    }
    .van-tag{
        margin-left: 5px;
    }
    .content >>> .van-grid-item__content::after,.van-hairline--top::after{
        border-width: 0;
    }
    .content >>> .van-grid-item__content--center{
        border-radius: 5px;
    }
    .content >>> .van-grid .van-icon__image{
        width: 1.4em;
        height: 1.4em;
    }
    .content >>> .van-cell,.content >>> .van-cell-group{
        border-radius: 5px;
    }
    .error{
        font-size: 8px;
    }
</style>
